<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model用来做表单的双向数据绑定,它是一个语法糖-->
        <!-- <input v-model="username"/> -->
        <!-- 双向数据绑定 -->
        <!-- 从数据到页面通过:属性名 -->
        <!-- 从页面到数据通过@事件名称 -->
        <!-- <input :value="username" @input="username = $event.target.value"/> -->
        <!-- 在组件当中使用v-model -->
        <!-- v-model在简化父组件的模板,子组件没有简化,还是父子通信 -->
        <my-input v-model="username"></my-input>
        <!-- <my-input :value="username" @input="username = $event"></my-input> -->
    </div>
</body>
<script>
    Vue.component('my-input', {
        props: ['value'],
        template: `
            <input :value="value" @input="$emit('input', $event.target.value)"/>
        `
    })
    new Vue({
        data() {
            return {
                username: 'zs'
            }
        },
        el: '#app'
    })
</script>
</html>